<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>21-爱好选择器（jQuery）</title>
    <script src="https://cdn.bootcdn.net/ajax/libs/jquery/2.2.4/jquery.min.js"></script>
</head>

<body>
    <form>
        你爱好的运动是？<input type="checkbox" id="checkedAllBox" />全选/全不选

        <br />
        <input type="checkbox" name="items" value="足球" />足球
        <input type="checkbox" name="items" value="篮球" />篮球
        <input type="checkbox" name="items" value="羽毛球" />羽毛球
        <input type="checkbox" name="items" value="乒乓球" />乒乓球
        <br />
        <input type="button" id="checkedAllBtn" value="全　选" />
        <input type="button" id="checkedNoBtn" value="全不选" />
        <input type="button" id="checkedRevBtn" value="反　选" />
        <input type="button" id="sendBtn" value="提　交" />
    </form>

    <script>
        /*
         * 功能说明:
         * 1. 点击'全选': 选中所有爱好
         * 2. 点击'全不选': 所有爱好都不勾选
         * 3. 点击'反选': 改变所有爱好的勾选状态
         * 4. 点击'提交': 提示所有勾选的爱好
         * 5. 点击'全选/全不选': 选中所有爱好, 或者全不选中
         * 6. 点击某个爱好时, 必要时更新'全选/全不选'的选中状态
        */

        const $items = $('input[type=checkbox][name=items]')

        // 1. 点击'全选': 选中所有爱好
        $('#checkedAllBtn').click(() => {
            $items.prop('checked', true)
            checkedAllBoxState()
        })

        // 2. 点击'全不选': 所有爱好都不勾选
        $('#checkedNoBtn').click(() => {
            $items.prop('checked', false)
            checkedAllBoxState()
        })

        // 3. 点击'反选': 改变所有爱好的勾选状态
        $('#checkedRevBtn').click(() => {
            $items.each((index, element) => {
                element.checked = !element.checked
            })
            checkedAllBoxState()
        })

        // 4. 点击'提交': 提示所有勾选的爱好
        $('#sendBtn').click(() => {
            const checkedElement = $items.filter(':checked')
            checkedElement.each((index, element) => {
                console.log($(element).val())
            })
        })

        // 5. 点击'全选/全不选': 选中所有爱好, 或者全不选中
        $('#checkedAllBox').on('click', function () {
            $items.prop('checked', this.checked)
        })

        // 6. 点击某个爱好时, 必要时更新'全选/全不选'的选中状态
        $items.on('click', () => {
            checkedAllBoxState()
        })

        function checkedAllBoxState() {
            $('#checkedAllBox').prop('checked', $items.filter(':not(:checked)').length === 0)
        }

    </script>
</body>

</html>